<template>
  <!-- 押金管理 -->
  <div class="app-page">
    <el-tabs ref="depositManage" v-model="activeTabName" type="card">
      <el-tab-pane v-if="$hasTabPermission(20201)" label="正常单据" name="normalstomer">
        <normal-receipts-tab :ent-type-list="entTypeList" :tree-data="treeData" :calc-type-list="calcTypeList" :payment-method-list="paymentMethodList" :pay-status-list="payStatusList" :paymen-fil-list="paymenFilList" :customer-type="customerType" :sub-type-all-list="subTypeAllList" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(20202)" label="待回执" name="receipt">
        <receipt-tab :ent-type-list="entTypeList" :tree-data="treeData" :calc-type-list="calcTypeList" :payment-method-list="paymentMethodList" :pay-status-list="payStatusList" :paymen-fil-list="paymenFilList" :customer-type="customerType" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(20203)" label="已作废" name="alreadystomer">
        <already-invalid-tab :ent-type-list="entTypeList" :tree-data="treeData" :calc-type-list="calcTypeList" :payment-method-list="paymentMethodList" :pay-status-list="payStatusList" :paymen-fil-list="paymenFilList" :customer-type="customerType" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(20204)" label="电子签环保统计" name="e-sign">
        <eignatureStatistics />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(20205)" label="押金到期" name="expires">
        <expires :tree-data="treeData" :calc-type-list="calcTypeList" :payment-method-list="paymentMethodList" :pay-status-list="payStatusList" :paymen-fil-list="paymenFilList" :customer-type="customerType" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import AlreadyInvalidTab from './components/AlreadyInvalid'
  import NormalReceiptsTab from './components/NormalReceiptsTab'
  import EignatureStatistics from './components/EignatureStatistics'
  import ReceiptTab from './components/receiptTab'
  import Expires from './components/Expires'
  import getTreeData from '@/utils/jsonTree'
  import { querySubTypeMap, queryMap, queryCsmTypeMap, depositQueryNew } from '@/api'
  import { mapGetters } from 'vuex'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  export default {
    name: 'depositManage',
    components: {
      AlreadyInvalidTab,
      NormalReceiptsTab,
      EignatureStatistics,
      Expires,
      ReceiptTab
    },
    data() {
      return {
        activeTabName: 'normalstomer',
        entTypeList: [], // 客户类型
        treeData: [], // 机构
        calcTypeList: [], // 收款方式
        paymentMethodList: [], // 支付方式
        paymenFilList: [], // 已过滤的支付方式
        payStatusList: [], // 支付状态
        subTypeAllList: [], // 支付状态
        customerType: [] //  客户类型
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    created() {
      this.queryOptionsMap()
      this.getTreeData()
    },
    mounted() {
      this.activeTabName = this.$refs.depositManage.panes.length > 0 ? this.$refs.depositManage.panes[0].name : ''
    },
    activated() {
      this.queryNew()
      this.interval = setInterval(() => {
        this.queryNew()
      }, 60000)
    },
    deactivated() {
      clearInterval(this.interval)
    },
    methods: {
      // 查询枚举
      async queryOptionsMap() {
        const [res, res1, res2, res3, res4, res5] = await Promise.all([querySubTypeMap({}), queryCsmTypeMap(), mergeAsyncFunc(queryMap, { enumName: 'CalcType' }), mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }), mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerType' })])
        this.subTypeAllList = res.data // 用气性质
        this.entTypeList = res1.data // 客户类型
        this.calcTypeList = res2.data.filter((item) => item.value !== 0) // 收款方式
        console.log(this.calcTypeList)
        this.paymentMethodList = res3.data // 支付方式
        this.payStatusList = res4.data // 支付状态
        this.customerType = res5.data // 客户类型
        // 过滤支付方式
        const arr = ['现金', '微信支付', '支付宝', '银行支付']
        this.paymentMethodList.filter(item => {
          if (arr.includes(item.desc)) {
            this.paymenFilList.push(item)
          }
        })
      },
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 查询是否有新的押金单，如果有，则播放语音
      async queryNew() {
        const query = {
          paramJson: {
            depStatus: 1, payStatus: 3
          }
        }
        const res = await depositQueryNew(query)
        if (res.data && JSON.stringify(res.data) !== '{}') {
          const dom = document.getElementById('newDeposit')
          dom.play()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
